<template>
	<view class="container">
		<view class="margin-left-sm margin-right-sm padding-sm bg-white radius10   flex justify-start margin-top">
			<image :src="orderDetail.descPic" mode="" style="width: 100rpx;height: 100rpx;">
			</image>
			<text class="title">{{orderDetail.description}}</text>
		</view>
		<view style="padding-bottom: 0;padding-top: 34rpx;"
			class="margin-left-sm margin-right-sm padding-sm bg-white radius10   flex content margin-top">
			<textarea  class="text-input" placeholder-style="color:#A7A7AF" v-model='content' placeholder="在这里填写你的评价" />
			<view class="cu-form-group padding-top">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" style="width: 150rpx;height: 150rpx;padding-bottom:0;"
						v-for="(item, index) in picList" :key="index">
						<image :src="item" style="width:100%;height: 100%;">
						</image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="solids" style="width: 150rpx;height: 150rpx;padding-bottom:0" @tap="ChooseImage">
						<text class="cuIcon-cameraadd"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="confirm">
			<view class="btn" @click="submit">提交</view>
		</view>

	</view>
</template>

<script>
	import {
		appConfig,
	} from '@/common/js/config.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				content: '',
				picList: [],
				orderDetail: {},
				type: ''

			}
		},
		onLoad(option) {
	       console.log(JSON.parse(option.item))
			this.orderDetail = JSON.parse(option.item)
			console.log(option.type)
			if (option.type) {
				this.type = option.type
			}
		},
		methods: {
			submit() {
				console.log(this.content)
				const that = this
				uni.showModal({
					title: "提示",
					content: "确定要发布该评论吗",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							if (!this.content) {
								return this.$util.msg('请输入内容')
							}
							// if (this.picList.length == 0) {
							// 	return this.$util.msg('请上传图片')
							// }
							const data = {
								appendix: this.picList.toString(),
								content: this.content,
								userId: uni.getStorageSync('userId'),
								orderServiceId: this.orderDetail.id
							}
							if (this.orderDetail.shopId) {
								data['shopId'] = this.orderDetail.shopId
							}
							this.$jsonPost(this.$api.addOrderServiceComment, data).then(res => {
								console.log(res)
								const [err,
									rs
								] = res


								console.log(rs)
								if (rs) {
									console.log(rs)
									this.$util.msg(rs.message)

									setTimeout(function() {

										if (that.type == 2) {
											console.log(111)
											uni.navigateBack({
												delta: 2
											})
										} else {
											console.log(2222)
											uni.navigateBack({
												delta: 1
											})
										}

									}, 1000)
								}
							})

						}
					},
				});

			},
			async ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						console.log(res);
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							console.log(req);
							this.picList.push(req.data);
						});
					},
				});
			},
			DelImg(e) {
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.picList.splice(e.currentTarget.dataset.index, 1);
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin-top: 23rpx;
		margin-left: 17rpx;
	}

	.text-input {
		height: 229rpx;
	}

	.content {
		flex-direction: column;
		margin-top: 23rpx;
	}

	.confirm {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 74rpx;

		.btn {
			width: 210rpx;
			height: 100%;
			background: linear-gradient(135deg, #F3AB1F, #EE7200);
			border-radius: 37rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 74rpx;
		}
	}
</style>
